const state = {
  // 所有的图表
  chartsTypeAll: {
    饼状图: [
      // {
      //   imgSrc: '/static/chartsImg/u0.png',
      //   id: 'b1',
      //   active: false
      // },
      {
        imgSrc: '/static/chartsImg/u1.png',
        id: 'b2',
        active: false,
        title: '环图'
      },
      {
        imgSrc: '/static/chartsImg/u2.png',
        id: 'b3',
        active: false,
        title: '基础饼图'
      },
      {
        imgSrc: '/static/chartsImg/u3.png',
        id: 'b4',
        active: false,
        title: '基础饼图2'
      },
      // {
      //   imgSrc: '/static/chartsImg/u4.png',
      //   id: 'b5',
      //   active: false,
      //   title: '南丁格尔玫瑰图'
      // },
      {
        imgSrc: '/static/chartsImg/u5.png',
        id: 'b6',
        active: false,
        title: '基础饼图3'
      },
      {
        imgSrc: '/static/chartsImg/u6.png',
        id: 'b7',
        active: false,
        title: '基础饼图4'
      }
    ],
    柱状图: [
      {
        imgSrc: '/static/chartsImg/u6619.png',
        id: 'z1',
        active: false,
        title: '基础柱状图'
      },
      {
        imgSrc: '/static/chartsImg/u6623.png',
        id: 'z2',
        active: false,
        title: '堆叠柱状图'
      },
      {
        imgSrc: '/static/chartsImg/u6621.png',
        id: 'z3',
        active: false,
        title: '分组柱状图'
      },
      {
        imgSrc: '/static/chartsImg/u6611.png',
        id: 'z4',
        active: false,
        title: '基础柱状图2'
      }
    ],
    折线图: [
      {
        imgSrc: '/static/chartsImg/u6592.png',
        id: 'l1',
        active: false,
        title: '多折线图'
      },
      {
        imgSrc: '/static/chartsImg/u6579.png',
        id: 'l2',
        active: false,
        title: '基础折线图'
      }
    ],
    词云图: [
      {
        imgSrc: '/static/chartsImg/u14.png',
        id: 'c1',
        active: false,
        title: '词云图'
      }
    ],
    地图: [
      {
        imgSrc: '/static/chartsImg/u12.png',
        id: 'd1',
        active: false,
        title: '地图'
      },
      {
        imgSrc: '/static/chartsImg/u13.png',
        id: 'd2',
        active: false,
        title: '热力地图'
      }
    ]
  },
  chartsTypes: [], // 图表类型对应的图表
  currentType: '全部', // 当前图表类型
  chartKeywords: '', // 图表搜索关键词
  renderWaysData: true,
  order: []
}

const mutations = {
  // 设置state中对应参数
  setState(state, payload) {
    payload.forEach(item => {
      state[item.key] = item.value
    })
  },
  setOrder(state, payload) {
    state[payload.key][payload.index] = payload.value
  }
}

const actions = {
  // 过滤图表。主要针对点击左侧图表类型和搜索图表时
  filterCharts({ commit, state }) {
    let arry = []
    if (state.currentType === '全部') {
      for (let key in state.chartsTypeAll) {
        state.chartsTypeAll[key].forEach(item => {
          item.title.includes(state.chartKeywords) && arry.push(item)
        })
      }
    } else {
      state.chartsTypeAll[state.currentType].forEach(item => {
        item.title.includes(state.chartKeywords) && arry.push(item)
      })
    }
    commit('setState', [{ key: 'chartsTypes', value: arry }])
  }
}

const getters = {}
export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}
